<template>
  <div>
    <strong style="float:left">注册一个新账号：</strong>
    <br />
    <div style="width:100%">
      <el-radio-group v-model="labelPosition" size="small">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
      <el-form
        ref="form"
        :label-position="labelPosition"
        :model="form"
        label-width="100px"
        style="border-bottom:3px solid #000"
      >
        <el-form-item label="用户名">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.userName" placeholder="请输入您的账号名称(用户名)"></el-input>
            </el-col>
            <el-col :span="10">
              <i class="el-icon-question" style="font-size:10px" v-if="form.userName==''">
                <strong>用户名必须保证数据库唯一,请起一个新的用户名</strong>
              </i>
              <i class="el-icon-success" style="font-size:40px" v-else-if="rightuserName"></i>
              <i class="el-icon-error" style="font-size:40px" v-else-if="!rightuserName"></i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="密码">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.passWord1" placeholder="请考虑您脑海中的密码"></el-input>
            </el-col>
            <el-col :span="10">
              <i class="el-icon-question" style="font-size:10px" v-if="form.passWord1==''">
                <strong>请至少6-10个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符。</strong>
              </i>
              <i class="el-icon-success" style="font-size:40px" v-else-if="rightPsw1"></i>
              <i class="el-icon-error" style="font-size:40px" v-else-if="!rightPsw1"></i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="再次确认密码">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.passWord2" placeholder="请再次输入您的密码"></el-input>
            </el-col>
            <el-col :span="12">
              <i class="el-icon-question" style="font-size:10px" v-if="form.passWord2==''">
                <strong>重新输入您的新密码，防止手误操作</strong>
              </i>
              <i class="el-icon-success" style="font-size:40px" v-else-if="rightPsw2"></i>
              <i class="el-icon-error" style="font-size:40px" v-else-if="!rightPsw2"></i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.mobilePhone" placeholder="请输入您的移动号码，用于后期的手机验证登录"></el-input>
            </el-col>
            <el-col :span="12">
              <i class="el-icon-question" style="font-size:10px" v-if="form.mobilePhone==''">
                <strong>手机号码必须保证正确的11位格式/^1[3456789]\d{9}$/,且必须保证数据库唯一</strong>
              </i>
              <i class="el-icon-success" style="font-size:40px" v-else-if="rightPhone"></i>
              <i class="el-icon-error" style="font-size:40px" v-else-if="!rightPhone"></i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-button type="danger" @click="confirmDialog=true">立即注册</el-button>
        <el-button>取消</el-button>
      </el-form>
      <el-dialog title="再次确认你的账户注册信息" :visible.sync="confirmDialog">
        <strong>
          用户名:--- {{form.userName}},
          <br />
          用户密码：---{{form.passWord2}},
          <br />
          用户手机：---{{form.mobilePhone}},
          <br />
          用户身份：---{{form.role}},
        </strong>
        <div slot="footer" class="dialog-footer">
          <el-button @click="confirmDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmDialog = false;finalRegister(form)">确 定</el-button>
        </div>
      </el-dialog>
      <strong>温馨提示：本系统完全免费，请牢记您的注册信息,默认注册为普通非会员用户！</strong>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      labelPosition: "right",
      form: {
        userName: "",
        passWord1: "",
        passWord2: "",
        mobilePhone: "",
        role: "普通用户"
      },
      messages: [],
      userSOList: [],
      confirmDialog: false
    };
  },
  computed: {
    rightuserName() {
      let duplicateFlag = false;
      for (let index = 0; index < this.userSOList.length; index++) {
        const userSO = this.userSOList[index];
        if (userSO.userName == this.form.userName) {
          duplicateFlag = true;
        }
      }
      return duplicateFlag == false;
    },
    rightPsw1() {
      //至少6-10个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符：
      return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,10}$/.test(
        this.form.passWord1
      );
    },
    rightPsw2() {
      //至少6-10个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符：
      if (this.form.passWord1 == this.form.passWord2) {
        return 1;
      } else {
        return 0;
      }
    },
    rightPhone() {
      let duplicateFlag = false;
      for (let index = 0; index < this.userSOList.length; index++) {
        const userSO = this.userSOList[index];
        if (userSO.mobilePhone == this.form.mobilePhone) {
          duplicateFlag = true;
        }
      }
      //利用正则对手机号匹配
      let realPhone = /^1[3456789]\d{9}$/.test(this.form.mobilePhone);
      return duplicateFlag == false && realPhone;
    }
  },
  created() {
    this.getInit();
  },
  methods: {
    async getInit() {
      axios
        .get("/api/UserController/user/alluserwithouttoken")
        .then(response => {
          let list = response.data.data;
          this.userSOList = list;
          console.log(" this.userSOList", this.userSOList);
        })
        .catch(error => {});
    },
    finalRegister(val) {
      let userSO = {
        userName: val.userName,
        passWord: val.passWord2,
        mobilePhone: val.mobilePhone,
        imageLocation: "",
        role: val.role, //普通用户
        token: ""
      };
      axios
        .post("/api/UserController/user/register", userSO)
        .then(response => {
          let obj = response.data;
          if (obj.code == 200) {
            this.$message({
              showClose: true,
              message: "恭喜你这是一条注册成功消息，用户自增id是" + obj.data+"!....三秒钟后自动跳转至登录页面",
              type: "success"
            });
           /*  let timer = setInterval(() => {
              this.$router.push({
                path: "/"
              });
            }, 3000);
            clearInterval(timer); */
             this.$router.push({
                path: "/"
              });
          }
        })
        .catch(error => {});
    }
  }
};
</script>

<style scoped>
</style>